<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<title>首页</title>
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css"/>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<!-- fonticon -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- swiper -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
		<style type="text/css">
			.demo-bottomNav {
			    line-height: 1.8em;
			    border-top: 1px solid #F1F1F1;
			    position:fixed;
			    bottom: 0;
			}
			.demo-bottomNav {
				line-height: 1.8em;
				border-top:1px solid #F1F1F1;
			}
			
			.demo-bottomNav a {
				display: block;
				width: 100%;
				height: 100%;
			}
			.swiper-button-next,
			.swiper-button-prev {
				/*swiper 默认图标适应性较差，使用rem单位规定左右按钮大小，图标大小*/
				width: 0.3rem !important;
				height: 0.5rem !important;
				background-size: cover !important;
				margin-top: -0.23rem !important;
			}
			.demo-nav {
				line-height: 1.8em;
			}
			
			.demo-nav div {
				border-left: 1px solid #f1f1f1;
				border-bottom: 1px solid #f1f1f1;
			}
			
			.demo-nav a {
				display: block;
				width: 100%;
				height: 100%;
			}
			
			.demo-nav div:nth-child(4n+1) {
				border-left: none;
			}
			/*我加入的*/
			body{
				height: 100%;
			}
			.navMenu{
				display: flex;
			    line-height: 1.8em;
			    border-top: 1px solid #F1F1F1;
			    flex-direction: row;
			    justify-content: space-between;
			}
			.paper{
				display: flex;
			    flex-direction: row;
			    align-items: center;
			}
			.remind{
				border: 1px solid #f1f1f1;
			}
			.remindResult{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
		</style>
	</head>

	<body class="fadeIn animated">
		<header class="ui-header clearfix w75 h8 f46 pl3 pr3 color8 bg-color-success t-c o-h">
			<div class="fl w5 h8">
			</div>
			<div class="ui-header-c fl f30 w59">
				票据管理
			</div>
			<div class="ui-header-r fl w5">
				<i class="icon iconfont icon-phone"></i>
			</div>
		</header>
		<!-- swiper -->
		<section class="swiper-container h40">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src='img/banner1.jpg' class="w75 h40" /></div>
				<div class="swiper-slide"><img src='img/banner2.jpg' class="w75 h40" /></div>
				<div class="swiper-slide"><img src='img/banner3.jpg' class="w75 h40" /></div>
			</div>
			<!-- Add Arrows -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</section>
		<!-- 导航 -->
		<section class="demo-nav t-c f28 clearfix">
			<div class="col-3 h19">
				<a href="choose.html" class="pt4 pb4"><i class="f42 color-primary icon iconfont icon-anniu"></i>
					<p>票据上传</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="classTicket.html" class="pt4 pb4">
					<i class="f46 color-success icon iconfont icon-dialog"></i>
					<p>票据查询</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="grid.html" class="pt4 pb4"><i class="f44 color-info icon iconfont icon-biaoge"></i>
					<p>薪资查询</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="#" class="pt4 pb4"><i class="f44 color-warning icon iconfont icon-iconfontliebiao1copy"></i>
					<p>薪酬计算</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="#" class="pt4 pb4"><i class="f44 color-warning icon iconfont icon-iconfontliebiao1copy"></i>
					<p>新增1</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="#" class="pt4 pb4"><i class="f44 color-warning icon iconfont icon-iconfontliebiao1copy"></i>
					<p>新增2</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="#" class="pt4 pb4"><i class="f44 color-warning icon iconfont icon-iconfontliebiao1copy"></i>
					<p>新增3</p>
				</a>
			</div>
			<div class="col-3 h19">
				<a href="#" class="pt4 pb4"><i class="f44 color-warning icon iconfont icon-iconfontliebiao1copy"></i>
					<p>新增4</p>
				</a>
			</div>
		</section>
		<div class="mt3 mb1">
			<span class="f1 ml2">票据提醒</span>
			<span class="fr mr2 f28"><a href="mouthAndClass.html" class="color4">更多</a><img src="./img/arrow.png" class="h3 w4" /></span>
		</div>
		<div class="f36 color3 t-c mb12">
			<div class="ml1 remind mr1 mt1 mb1 pl1 pr1">
				<div class="t-l f36 mb1 mt2">个税抵扣月份：2018年9月</div>
				<h2 class="f34">
					<span class="fl">票据类型</span>
					<span>票据金额</span>
					<span class="fr">审核结果</span>
				</h2>
				<ul class="remindResult f32 mt2 mb2">
					<li>子女教育</li>
					<li style="color:#999">9999</li>
					<li class="f30">
						<span class="colorSuccess">审核通过</span><br>
					    <span>2018.0.01</span>
					</li>
				</ul>
				<ul class="remindResult f32 mt2 mb2">
					<li>赡养父母</li>
					<li style="color: #999;">9999</li>
					<li class="f30">
						<span class="red">审核未通过</span><br>
					    <span>2018.0.01</span>
					</li>
				</ul>
			</div>
			<div class="ml1 remind mr1 mt1 mb1 pl1 pr1">
				<div class="t-l f36 mb1 mt2">个税抵扣月份：2018年9月</div>
				<h2 class="f34">
					<span class="fl">票据类型</span>
					<span>票据金额</span>
					<span class="fr">审核结果</span>
				</h2>
				<ul class="remindResult f32 mt2 mb2">
					<li>子女教育</li>
					<li style="color:#999">9999</li>
					<li class="f30">
						<span class="colorSuccess">审核通过</span><br>
					    <span>2018.0.01</span>
					</li>
				</ul>
				<ul class="remindResult f32 mt2 mb2">
					<li>赡养父母</li>
					<li style="color: #999;">9999</li>
					<li class="f30">
						<span class="red">审核未通过</span><br>
					    <span>2018.0.01</span>
					</li>
				</ul>
			</div>
		</div>
		<!-- 底部导航 -->
		<nav class="demo-bottomNav mt6 w75 h12 pt1 t-c f28 bg-color8 o-h navMenu">
			<div class="w15 fl">
				<a href="index.html">
					<i class="f46 icon iconfont icon-home_light"></i>
					<p>首页</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="comment.html">
					<i class="f46 icon iconfont icon-list"></i>
					<p>消息</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="my.html">
					<i class="f46 icon iconfont icon-servicefill"></i>
					<p>账户</p>
				</a>
			</div>
		</nav>
		
		<script type="text/javascript">
			var aside = $(".ui-aside").asideUi({
				hasmask: true,
				size: "4rem",
				position: "left",
				sidertime: 300
			});
			$(".ui-header-l").on('touchend', function() {
				aside.toggle();
			})
			
			var swiper = new Swiper('.swiper-container', {
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				pagination: {
					el: '.swiper-pagination',
				}
			});
		</script>
	</body>

</html>